<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="lib/css/carousel.css"/>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="layui/layui.js"></script>
    <script src="js/frameLayUi.js"></script>
    <SCRIPT type="text/javascript">
        function confirmDialog() {
            if (confirm("确定要删除该图书吗?")) {
                return true;
            }
            else {
                return false;
            }
        }
    </SCRIPT>
    <script type="text/javascript">

            function openModal(obj){
                $("#myModal").modal('show');
                var $td = $(obj).parents('tr').children('td');
                var id = $td.eq(0).text();
                var img = $td.eq(1).text();
                var name = $td.eq(2).text();
                var author = $td.eq(3).text();
                var price = $td.eq(5).text();
                var descript=$td.eq(9).text();
                $("#id").val(id)
                $("#img").val(img)
                $("#name").val(name)
                $("#author").val(author)
                $("#price").val(price)
                $("#descript").text(descript)
            }
            function check() {
                var date =$("#test5").val()
                var file=$("#file").val()
                console.log(date)
                console.log(file)
                if(date.length==0||date==""){
                    alert("请选择时间后提交")
                    return false;
                }
                if(file.length==0||file==""){
                    alert("请上传文件后提交")
                    return false;
                }else {
                    return true;
                }
            }

    </script>

    <style>
        .pagination-outer{ text-align: center; }
        .pagination{
            font-family: 'Rubik', sans-serif;
            display: inline-flex;
            position: relative;
        }
        .pagination li a.page-link{
            color: #10ac84;
            background-color: transparent;
            font-size: 22px;
            font-weight: 500;
            line-height: 28px;
            height: 40px;
            width: 40px;
            margin: 0 5px 10px;
            border: none;
            border-radius: 0;
            overflow: hidden;
            position: relative;
            transition: all 0.4s ease 0s;
        }
        .pagination li.active a.page-link,
        .pagination li a.page-link:hover,
        .pagination li.active a.page-link:hover{
            color: #fff;
            background-color: #10ac84;
        }
        .pagination li:first-child a.page-link:hover,
        .pagination li:last-child a.page-link:hover{
            box-shadow: 0 0 10px rgba(0,0,0,0.9);
        }
        .pagination li a.page-link:before{
            content: attr(data-hover);
            color: rgba(255,255,255,0.2);
            font-size: 80px;
            font-weight: 700;
            height: 100%;
            width: 100%;
            opacity: 1;
            position: absolute;
            top: 100%;
            left: 0;
            transition: all 0.3s ease 0s;
        }
        .pagination li a.page-link:hover:before,
        .pagination li.active a.page-link:before{
            opacity: 1;
            top: 10px;
        }
        @media only screen and (max-width: 480px){
            .pagination{ display: block; }
            .pagination li{
                margin-bottom: 10px;
                display: inline-block;
            }
        }
    </style>
</head>
<body>
<div class="col-lg-12">
    <div style="margin: 0 auto;width: 1300px;">
        <form action="BookServlet?m=queryBook" method="post"
              style="background-color: #ffffff;border-radius: 6px;margin-top: 20px" class="form-inline">
            <div class="form-group" style='margin-left:5%;margin-bottom:3%;'>
                <input type="text" class="form-control" placeholder="请按图书名称查询" name="b_name" id="text1">
            </div>
            <select class="form-control" name="b_cate" style='margin-left:10%;margin-bottom:3%' id="option1">
                <option disabled="disabled" value="">--请选择分类--</option>
                <c:forEach var="i" items="${categoryMsg}">
                    <option value="${i.cid}">${i.cname}</option>
                </c:forEach>
            </select>
            <input type="submit" value='点击查询' class="btn btn-success" style='margin-left:15%;margin-bottom:3%'>
            <a class="btn btn-info" style='margin-left:15%;margin-bottom:3%' href="BookServlet?m=queryBook">查询全部书籍</a>
        </form>
        <table width="90%" borderColor="#C0C0C0" align="center" class="table table-bordered">
            <tr bgcolor="#FFFF00">
                <th style="text-align: center">图书编号</th>
                <th style="text-align: center">图书图片</th>
                <th style="text-align: center">图书名称</th>
                <th style="text-align: center">图书作者</th>
                <th style="text-align: center">图书分类</th>
                <th style="text-align: center">图书价格</th>
                <th style="text-align: center">发布时间</th>
                <th style="text-align: center">是否热门</th>
                <th style="text-align: center">是否特价</th>
                <th style="text-align: center">操作</th>
            </tr>
            <c:forEach items="${pager.rs }" var="b">
                <tr>
                    <td align='center' style="vertical-align: middle;">${b.id }</td>
                    <td align='center' style="vertical-align: middle;"><img src="${b.img }" width="100px"
                                                                            height="100px"></td>
                    <td align='center' style="vertical-align: middle;">${b.name }</td>
                    <td align='center' style="vertical-align: middle;">${b.author}</td>
                    <td align='center' style="vertical-align: middle;">${b.category }</td>
                    <td align='center' style="vertical-align: middle;">${b.price }</td>
                    <td align='center' style="vertical-align: middle;">${b.datetime }</td>
                    <td align='center' style="vertical-align: middle;">${b.special }</td>
                    <td align='center' style="vertical-align: middle;">${b.hot }</td>
                    <td style="display: none">${b.descript }</td>
                    <td align='center' style="vertical-align: middle;">
                        <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="openModal(this)">
                            <i class="layui-icon"></i>
                        </a>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" style="width: 1000px">
                                <div class="modal-content" style="width: 1000px">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">修改图书信息</h4>
                                    </div>
                                    <div class="modal-body" style="height: 600px">
                                        <form action="BookServlet?m=updateBook" enctype="multipart/form-data" method="post" onsubmit="return check()">
                                            <input type="hidden" name="book_id" id="id">
                                            <div class="form-horizontal" style="width: 960px">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">图书名称</label>
                                                    <div class="col-sm-5">
                                                        <input type="text" class="form-control" name="book_name" id="name" >
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">图书价格</label>
                                                    <div class="col-sm-5">
                                                        <input type="text" class="form-control" name="book_price" id="price">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">作者名称</label>
                                                    <div class="col-sm-5">
                                                        <input type="text" class="form-control" name="book_author" id="author">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">选择所属分类</label>
                                                    <div class="col-sm-5">
                                                        <select class="form-control" name="book_category">
                                                            <option disabled="disabled">--请选择分类--</option>
                                                            <c:forEach var="i" items="${categoryMsg}">
                                                                <option value="${i.cid}">${i.cname}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">日期时间选择器</label>
                                                    <div class=" col-sm-5">
                                                        <input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss" name="book_datetime">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">图书图片</label>
                                                    <div class="col-sm-2" >
                                                        <input type="file" name="book_photo"  id="file">
                                                    </div>
                                                    <div class="col-sm-3" >
                                                        <img src="${b.img }" alt="" width="100px" height="100px">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">是否热门</label>
                                                    <div class="col-sm-5">
                                                        <input type="radio" name="book_hot" value="1"  checked="">是
                                                        <input type="radio" name="book_hot" value="0">否
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">是否特价</label>
                                                    <div class="col-sm-5">
                                                        <input type="radio" name="book_spec" value="1" checked="">是
                                                        <input type="radio" name="book_spec" value="0">否
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">书籍描述</label>
                                                    <div class="col-sm-5">
                                                        <textarea class="form-control" rows="5" name="book_descript" id="descript"></textarea>
                                                    </div>
                                                </div>


                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                                <input type="submit" class="btn btn-primary" value="提交更改"/>
                                            </div>
                                        </form>
                                    </div>


                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        &nbsp;&nbsp;
                        <a href="BookServlet?m=deleteBook&&id=${b.id }" class="layui-btn layui-btn-sm"
                           onclick="return confirmDialog();">
                            <i class="layui-icon"></i>
                        </a>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <div>
            <span style="margin-left: 27%;margin-top: -50%">共${pager.total}记录&nbsp;&nbsp;共${pager.totalPage}页</span>
            <div class="demo" style="min-height: 300px;">
                <div class="container">
                    <div class="row pad-15">
                        <div class="col-md-12">
                            <nav class="pagination-outer" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li class="page-item top">
                                        <a href="" class="page-link" aria-label="Previous">
                                            <span aria-hidden="true">«</span>
                                        </a>
                                    </li>
                                    <c:forEach var="i" begin="1" end="${pager.totalPage}">
                                        <c:if test="${i==pager.currentPage}">
                                            <li class="page-item active"><a class="page-link" href="href="BookServlet?m=queryBook&&currentPage=${i}">${i}</a></li>
                                        </c:if>
                                        <c:if test="${i!=pager.currentPage}">
                                            <li class="page-item"><a class="page-link" href="BookServlet?m=queryBook&&currentPage=${i}">${i}</a></li>
                                        </c:if>
                                    </c:forEach>
                                    <li class="page-item bottom">
                                        <a href="" class="page-link" aria-label="Next">
                                            <span aria-hidden="true">»</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <p align="center" style='color:red'>${msg}</p>
        </form>
    </div>
</div>
<script>
    $(function () {
        $(".li1").click(function () {
            $(this).addClass("active")
        })
        $(".top").click(function () {
            var currentPage =${pager.currentPage};
            var totalPage =${pager.totalPage}
            if (currentPage > 1) {
                currentPage--;
                $(this).find("a").attr("href", "BookServlet?m=queryBook&currentPage="+ currentPage+"&b_name=${bname}&b_cate=${bcate}")
            } else {
                $(this).addClass("disabled");
            }
        })
        $(".bottom").click(function () {
            var currentPage =${pager.currentPage};
            var totalPage =${pager.totalPage}
            if (currentPage < totalPage) {
                currentPage++;
                $(this).find("a").attr("href", "BookServlet?m=queryBook&currentPage=" +currentPage +"&b_name=${bname}&b_cate=${bcate}")
            } else {
                $(this).addClass("disabled");
            }
        })
        var bcate = "${bcate}"
        console.log(bcate);
        var index;
        for (var i = 0; i < $("#option1 option").length; i++) {
            if ($("#option1 option").eq(i).val() == bcate) {
                index = i;
                console.log(index)
            }
        }
        $("#option1 option").eq(index).attr("selected", "selectded")

        var bname = "${bname}"
        $("#text1").val(bname)


        layui.use('laydate', function() {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#test5'
                ,type: 'datetime'
            });
        })

    })
</script>
</body>
</html>